<template>
  <div class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
    <div class="row">
      <div class="col-md-12">
        <form @submit.prevent="page(1)" accept-charset="UTF-8" class="form-inline" id="info_search_form" method="post" role="form">
          <div class="form-group">
            <label class="font-noraml">创建时间</label>
            <div class="input-daterange input-group">
              <input autocomplete="off" class="input-sm form-control" name="dateBegin" placeholder="点击输入起始时间" type="text"/>
              <span class="input-group-addon">到</span>
              <input autocomplete="off" class="input-sm form-control" name="dateEnd" placeholder="点击输入截止时间" type="text"/>
            </div>
          </div>
          <div class="form-group">
            <input class="input-sm form-control" name="keyword" placeholder="请输入关键词" type="text">
          </div>
          <div class="form-group">
            <button class="btn btn-sm btn-primary" type="submit">搜索</button>
            <button class="btn btn-sm btn-dafault" type="reset">重置</button>
          </div>
        </form>
        <a @click="edit('a',{id:0})" class="btn btn-xs btn-success m-t" href="javascript:" v-show='staff.hasPermission("user:add")'><i class="fa fa-edit"></i> 新增/添加</a>
        <div class="table-responsive table-scrollable">
          <table class="table table-bordered table-striped  table-hover">
            <thead>
            <tr>
              <th style="width:20px;">#</th>
              <th>用户姓名</th>
              <th>用户账号</th>
              <th>用户类型</th>
              <th>所属机构</th>
              <th>固定电话</th>
              <th>移动电话</th>
              <th>电子邮箱</th>
              <th>联系地址</th>
              <th>身份证号</th>
              <th>使用状态</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-if="result.data.data && result.data.data.length>0" v-for="(item, index) in result.data.data">
              <td>{{(result.data.pageIndex-1)*result.data.pageSize + index+1}}</td>
              <td>{{item.name}}</td>
              <td>{{item.account}}</td>
              <td>{{typeEnum(item)}}</td>
              <td>{{item.orgName}}</td>
              <td>{{item.telephone}}</td>
              <td>{{item.cellphone}}</td>
              <td>{{item.email}}</td>
              <td>{{item.address}}</td>
              <td>{{item.idCard}}</td>
              <td>{{stateEnum(item.state)}}</td>
              <td>
<!--                <a @click="info('i',item)" class="label label-info" href="javascript:" rel="nofollow" v-show='staff.hasPermission("user:info")'><i class="fa fa-bookmark"></i> 详情</a>-->
                <a @click="edit('e',item)" class="label label-success" href="javascript:" v-show='staff.hasPermission("user:edit")'><i class="fa fa-edit"></i> 编辑</a>
                <a @click="del(item)" class="label label-danger" href="javascript:" rel="nofollow" v-show='staff.hasPermission("user:del")'><i class="fa fa-trash-o"></i> 删除</a>
                <a @click="resetpwd(item)" class="label label-warning" href="javascript:" rel="nofollow" v-show='staff.hasPermission("user:edit:resetpwd")'><i class="fa fa-expeditedssl"></i> 密码重置</a>
                <!--<a href="javascript:;" @click="getOrg(item)" rel="nofollow" class="label label-primary" ><i class="fa fa-staff"></i> 组织查看</a>-->
                <a href="javascript:;" v-show='staff.hasPermission("user:edit:role")' @click="setRole(item)" rel="nofollow" class="label label-primary"><i class="fa fa-sun-o"></i> 授权</a>
                <a href="javascript:;" v-show='staff.hasPermission("user:disabled")' @click="disabled(item)" rel="nofollow" :class="'label '+(item.state==0?'label-danger':'label-success')"><i :class="'fa '+(item.state==0?'fa-user-times':'fa-user-plus')"></i> {{item.state==0?'停用':'启用'}}</a>
<!--                <a href="javascript:;" v-show='staff.hasPermission("user:offline")' @click="offline(item)" rel="nofollow" class="label label-warning"><i class="fa fa-sun-o"></i> 强制下线</a>-->
              </td>
            </tr>
            <tr v-if="result.data.data==null || result.data.data.length==0">
              <td colspan="12">
                <div class="alert"><strong>{{ result | message }}</strong></div>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
        <div class="b_page" v-html="tagPages"></div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
  import '@/assets/css/style.css'

  import $ from '@/assets/js/jquery-vendor.js'
  import axios from 'axios'
  import '@/assets/js/datepicker-vendor.js'
  import {$storage, axiosContentType, site} from '@/assets/js/boss'
  import '@/assets/js/pageTag'

  export default {
    data() {
      return {
        result: {data: {pageIndex: 1, data: []}, message: ''},
        tagPages: ''
      }
    },
    mounted() {
      let that = window.$vueApp = this;
      document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
      this.staff.init(function () {
        that.page();
      });
      $('.input-daterange').datepicker({
        language: 'zh-CN',
        format: 'yyyy-mm-dd',
        keyboardNavigation: !1,
        forceParse: !1,
        autoclose: !0
      });
    },
    methods: {
      page(pageIndex) {
        let that = this;
        if (!pageIndex) pageIndex = 1;
        axios.post(site.staff.page + pageIndex
          , $('#info_search_form').serialize()
          , axiosContentType.xWwwFormUrlencoded
        ).then(function (response) {
          const result = response.data;
          if (result.code === 0) {
            that.result = result;
            that.tagPages = that.tag.page(result.data);
          } else {
            alert(result.message);
          }
        });
      },
      info(title, item) {
        $storage.setItem(site.staff.info, item.id);
        this.lbox.openMyBoxLayer(title, site.staff.view + '/info');
      },
      setRole(item) {
        $storage.setItem(site.staff.info, item.id);
        this.lbox.openMyBoxLayer('', site.staff.view + '/edit/role');
      },
      edit(title, item) {
        $storage.setItem(site.staff.info, item.id || 0);
        this.lbox.openMyBoxLayer(title, site.staff.view + '/edit');
      },
      del(item) {
        let that = this;
        if (confirm('确认删除吗?')) {
          axios.post(site.staff.del + item.id, {}).then(function (response) {
            const result = response.data;
            if (result.code === 0) {
              that.page(that.result.data.pageIndex);
              alert('删除成功');
            } else {
              alert(result.message);
            }
          });
        }
      },
      disabled(item) {
        let that = this;
        let state = 1;
        if (item.state === 1) {
          state = 0;
        }
        if (confirm(`确认${state === 0 ? '启用' : '停用'}账号[${item.account}]吗?`)) {
          axios.post(site.staff.disabled + item.id + '/' + state, {}).then(function (response) {
            const result = response.data;
            if (result.code === 0) {
              that.page(that.result.data.pageIndex);
              alert('操作成功');
            } else {
              alert(result.message);
            }
          });
        }
      },
      offline(item) {
        let that = this;
        if (confirm(`确认用户[${item.account}]下线么?`)) {
          axios.post(site.staff.offline + item.id, {}).then(function (response) {
            const result = response.data;
            if (result.code === 0) {
              that.page(that.result.data.pageIndex);
              alert('操作成功');
            } else {
              alert(result.message);
            }
          });
        }
      },
      resetpwd(item) {
        if (confirm('确认要重置[' + item.account + ']的密码吗?')) {
          axios.post(site.staff.resetpwd + item.id, {}).then(function (response) {
            const result = response.data;
            if (result.code === 0) {
              alert('重置成功,新密码:' + result.data);
            } else {
              alert(result.message);
            }
          });
        }
      },
      stateEnum(key) {
        let val = '未知';
        switch (key) {
          case 0:
            val = '启用';
            break;
          case 1:
            val = '禁用';
            break;
        }
        return val;
      },
      typeEnum(item) {
        // -1超级管理员0管理员1河长2普通人员
        switch (item.type) {
          case -1: {
            return '超级管理员';
          }
          case 0: {
            return '管理员';
          }
          case 1: {
            return '河长';
          }
          case 2: {
            return item.job;
          }
        }
      }
    }
  }
</script>
